//第一张图的js样式
document.querySelector('.banner_show_nav .container').addEventListener('click', function (e) {
    if (e.target.tagName === 'A') {
        const h2s = document.querySelectorAll('.banner h2')
        const lis = document.querySelectorAll('.picture li')
        const ps = document.querySelectorAll('.banner_show__con p')
        if (e.target.classList[1] === 'banner_show_nav__item--1') {

            const show = document.querySelector('.picture_show_item_img')
            if (show) {
                show.classList.remove('picture_show_item_img')
            }
            lis[0].classList.add('picture_show_item_img')
            // 年费绿钻
            const show1 = document.querySelector('.plays')
            if (show1) {
                show1.classList.remove('plays')
            }
            h2s[0].classList.add('plays')
            // 描述文字
            const show2 = document.querySelector('.play')
            if (show2) {
                show2.classList.remove('play')
            }
            ps[0].classList.add('play')
            //   他的下一个兄的的定位复原
            e.target.nextElementSibling.style.backgroundPosition = '-500px -100px';
            // 他的下一个兄的的下一个兄的的定位复原
            e.target.nextElementSibling.nextElementSibling.style.backgroundPosition = '-500px -200px';
            // 点击后改变自身的位置
            e.target.style.backgroundPosition = '-800px 0';
        } else if (e.target.classList[1] === 'banner_show_nav__item--2') {
            const show = document.querySelector('.picture_show_item_img')
            if (show) {
                show.classList.remove('picture_show_item_img')
            }
            lis[1].classList.add('picture_show_item_img')
            const show1 = document.querySelector('.plays')
            if (show1) {
                show1.classList.remove('plays')
            }
            h2s[1].classList.add('plays')
            const show2 = document.querySelector('.play')
            if (show2) {
                show2.classList.remove('play')
            }
            ps[1].classList.add('play')
            // 他的上一个兄弟定位复原
            e.target.previousElementSibling.style.backgroundPosition = '-500px 0px';
            // 他的下一兄弟的定复原
            e.target.nextElementSibling.style.backgroundPosition = '-500px -200px';
            // 点击后改变自身的位置
            e.target.style.backgroundPosition = '-800px -100px';
        } else if (e.target.classList[1] === 'banner_show_nav__item--3') {
            const show = document.querySelector('.picture_show_item_img')
            if (show) {
                show.classList.remove('picture_show_item_img')
            }
            lis[2].classList.add('picture_show_item_img')
            const show1 = document.querySelector('.plays')
            if (show1) {
                show1.classList.remove('plays')
            }
            h2s[2].classList.add('plays')
            const show2 = document.querySelector('.play')
            if (show2) {
                show2.classList.remove('play')
            }
            ps[2].classList.add('play')
            // 点击后改变自身的位置
            e.target.style.backgroundPosition = '-800px -200px';
            // 他的上一个兄的的定位复原
            e.target.previousElementSibling.style.backgroundPosition = '-500px -100px';
            // 他的上一个的兄弟的兄弟复原
            e.target.previousElementSibling.previousElementSibling.style.backgroundPosition = '-500px 0px';
        }
    }
})
// 小白点点击
document.querySelector('.mod_control .mod_tag').addEventListener('click', function (e) {
    if (e.target.tagName === 'A') {
        document.querySelector('.mod_control .mod_tag .control_item .active').classList.remove('active')
        e.target.classList.add('active')
    }
})